<template>
	<view class="personal">
		<TopBar :indexflag="true" :combakflag="true" :lang="false" :bottom="true" :title="$t('JoinAlliance')"
			barstyle="background-color:rgba(0,0,0,0)"></TopBar>
		<HeaderTitle :title="$t('Enroll')" :bottom="false" :lang="false" :mobile="true" :combakflag="true">
		</HeaderTitle>
		<view :class="i18nLocale=='ug'?'input-from ug-from':'input-from'">
			<view class="input-item">
				<view class="title">
					{{$t('Name')}}
				</view>
				<u--input v-model="form.username" maxlength="25" :placeholder="$t('NamePlaceholder')" fontSize="28rpx"
					autoBlur border="bottom" :adjustPosition='false'></u--input>
			</view>
			<view class="input-item">
				<view class="title">
					{{$t('CardId')}}
				</view>
				<u--input v-model="form.idcard_number" type="idcard" maxlength="18"
					:placeholder="$t('CardIdPlasholder')" fontSize="28rpx" autoBlur border="bottom"
					:adjustPosition='false'></u--input>
			</view>
			<view class="input-item">
				<view class="title">
					{{$t('Phone')}}
				</view>
				<u--input v-model="form.mobile" type="number" maxlength="11" :placeholder="$t('NumberPlaceholder')"
					border="bottom" fontSize="28rpx" :adjustPosition='false'></u--input>
			</view>
			<view class="input-item">
				<view class="title">
					{{$t('InteriorAddress')}}
				</view>
				<u--input v-model="form.address" maxlength="50" :placeholder="$t('DetailAddress')" border="bottom"
					fontSize="28rpx" :adjustPosition='false'></u--input>
			</view>
			<view class="input-item" @click="changeArea">
				<view class="title">
					{{$t('UserArea')}}
				</view>
				<u--input :placeholder="$t('UserAreaPlasholder')" border="bottom" fontSize="28rpx"
					:adjustPosition='false' :value="areaname"></u--input>
				<u-picker v-if="columns.length" :show="show" ref="uPicker" :columns="columns" @close="show=false"
					@cancel="show=false" @change="changeHandler" @confirm="changepiker" closeOnClickOverlay
					:cancelText="$t('TimeCancel')" :confirmText="$t('Confirm')"
					:keyName="i18nLocale=='ug'?'ug_name':'cn_name'"></u-picker>
			</view>
			<view class="input-item" @click="changeTops">
				<view class="title">
					{{$t('ScopeDelivery')}}
				</view>
				<u--input :placeholder="$t('ScopeDeliveryPlasholder')" border="bottom" fontSize="28rpx"
					:adjustPosition='false' :value="topsname"></u--input>
				<u-picker v-if="tops.length" :show="topsshow" :columns="tops" @close="topsshow=false"
					@cancel="topsshow=false" @confirm="changetopspiker" closeOnClickOverlay
					:cancelText="$t('TimeCancel')" :confirmText="$t('Confirm')"
					:keyName="i18nLocale=='ug'?'ug_name':'cn_name'"></u-picker>
			</view>
			<view class="input-item">
				<view class="title">
					{{$t('CardImage')}}
				</view>
				<view class="upload">
					<view class="upload_1" @click="chnageimage(1)">
						<image v-if="form.idcard_front" :src="getImgSrc(form.idcard_front)" mode="widthFix"
							style="width: 150px;height: 50px;border-radius: 20rpx;"></image>
						<image v-if="!form.idcard_front" src="@/static/images/sfz.png" mode="widthFix"
							style="width: 150px;height: 50px;"></image>
					</view>
					<!-- <view class="upload_1" @click="chnageimage(2)">
						<image v-if="form.idcard_back" :src="getImgSrc(form.idcard_back)" mode="widthFix"
							style="width: 150px;height: 50px;border-radius: 20rpx;"></image>
						<image v-if="!form.idcard_back" src="@/static/images/sff.png" mode="widthFix"
							style="width: 150px;height: 50px;"></image>
					</view> -->
				</view>
			</view>
		</view>
		<u-toast ref="uToast" :message="notmessage"></u-toast>
		<view class="save-button" @click="changesave">{{$t('Submit')}}</view>
	</view>
</template>

<script>
	import TopBar from "@/components/TopBar.vue"
	import HeaderTitle from "@/components/HeaderTitle.vue"

	import {
		postriders,
		getareas,
		gettops
	} from '@/api/all.js';
	export default {
		components: {
			TopBar,
			HeaderTitle
		},
		data() {
			return {
				fileList6: [],
				show: false,
				columns: [],
				areaname: '',
				topsshow: false,
				tops: [],
				topsname: '',

				form: {
					username: '',
					mobile: '',
					address: '',
					idcard_front: '',
					idcard_back: '',
					area_code: '',
					top_id: '',
					idcard_number: ''
				},
				mp_openid: '',
				user_id: '',
				notmessage: '请仔细填写!'
			};
		},
		onLoad(e) {

			uni.setNavigationBarTitle({
				title: this.$t('DeliveryPerson')
			})
			this.getAreas();
		},
		computed: {
			i18nLocale() {
				return this.$i18n.locale;
			},
		},
		methods: {
			getAreas() {
				let that = this;
				getareas({}).then((res) => {
					if (res.code == 200) {
						let data = res.body.data;
						that.columns.push(data);
					}

				})
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					console.log(this.columns[0][index].children, '+++++')
					picker.setColumnValues(1, this.columns[0][index].children);
				}
			},
			getTops(area_code) {
				let that = this;
				gettops({
					area_code: area_code
				}).then((res) => {
					console.log(res, '++++')
					if (res.code == 200) {
						let data = res.body.data;
						that.tops.push(data);
					}

				})
			},
			changeArea() {
				this.show = true;
			},
			changepiker(e) {
				this.show = false;
				this.form.area_code = e.value[1].code;
				this.getTops(this.form.area_code);
				if (this.$i18n.locale == 'ug') {
					this.areaname = e.value[0].ug_name + ' / ' + e.value[1].ug_name
				} else {
					this.areaname = e.value[0].cn_name + ' / ' + e.value[1].cn_name
				}

				console.log(e, '++++')
			},
			changeTops() {
				this.topsshow = true;
			},
			changetopspiker(e) {
				this.topsshow = false;
				if (e.value) {
					this.$store.commit('setTops', e.value[0]);
					this.form.top_id = e.value[0].id;
					if (this.$i18n.locale == 'ug') {
						this.topsname = e.value[0].ug_name
					} else {
						this.topsname = e.value[0].cn_name
					}
				}
			},
			chnageimage(id) {
				this.uploadimage(id);
			},
			//上传图片
			uploadimage(id) {
				let t = this
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						let Pathurl = res.tempFilePaths[0];
						uni.uploadFile({
							url: 'dikiapi/upload',
							filePath: Pathurl,
							name: 'file',
							formData: {},
							header: {
								authorization: 'Bearer ' + uni.getStorageSync('rider_token'),
								Accept: 'application/json'
							},
							success: (res) => {
								let data = JSON.parse(res.data);
								console.log(data, '+++++++++++')
								if (res.statusCode == 200) {
									console.log(data.body)
									let url = data.body.src;
									if (id == 1) {
										t.form.idcard_front = url;
									} else {
										t.form.idcard_back = url;
									}

								}
							}
						});

					}
				});
			},
			changesave() {
				let that = this;
				let riderinfo = JSON.parse(uni.getStorageSync('riderinfo'));
				let fromdata = that.form;
				if (fromdata.username && fromdata.mobile && fromdata.address && fromdata.area_code && fromdata.area_code &&
					fromdata.top_id && fromdata.idcard_front && fromdata.idcard_number) {
					postriders({
						username: that.form.username,
						mobile: that.form.mobile,
						address: that.form.address,
						idcard_front: that.form.idcard_front,
						// idcard_back: that.form.idcard_back,
						area_code: that.form.area_code,
						top_id: that.form.top_id,
						idcard_number: that.form.idcard_number,
						mp_openid: riderinfo.mp_openid,
						user_id: riderinfo.id,
						avatar: riderinfo.avatar
					}).then((res) => {
						if (res.code == 200) {
							let data = res.body;
							that.$store.commit('setUsertoken', data.token);
							that.$store.commit('setUserinfo', data.riderinfo);
							uni.redirectTo({
								url: '/pages/main/audit?type=1'
							})
						}

					})
				} else {
					this.$refs.uToast.show({
						top: 0,
						message: this.$t('ForomEmptiy'),
						color: '#fff',
						bgColor: '#f0ba53'
					});
					return;
				}
			}

		}
	}
</script>

<style lang="scss">
	.personal {
		padding: $uni-spacing-padding-sm;
		box-sizing: border-box;

		.input-from {
			// background-color: #fff;
			width: 100%;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			// border-radius: $uni-border-radius-lg;
			// box-shadow: $uni-bg-shadow;

			.input-item {
				width: 100%;
				// display: flex;
				padding: $uni-spacing-padding-sm;
				box-sizing: border-box;

				input {
					font-size: $uni-font-size-base;

				}

				.upload {
					display: flex;
					margin-top: 30rpx;

					.upload_1 {
						margin: 0rpx 10rpx;
					}

					image {
						box-shadow: $uni-bg-shadow;
						border: 1rpx solid #eee;
						border-radius: 10rpx;
					}
				}

				.title {
					color: $uni-color-title;
					font-size: $uni-font-size-base;
				}
			}
		}

		.selecet-addres {
			background-color: #fff;
			width: 100%;
			padding: 20rpx 40rpx;
			box-sizing: border-box;
			margin-top: $uni-spacing-margin-sm;
			border-radius: $uni-border-radius-lg;
			box-shadow: $uni-bg-shadow;
			color: $uni-color-title;
			font-size: $uni-font-size-base;



		}

		.no-address {
			margin-top: 100rpx;

			text {
				padding: 0rpx 20rpx;
			}
		}

		.address {
			// border-bottom: 2rpx solid;
			display: flex;
			margin-bottom: 20rpx;
			background-color: $uni-bg-color-box;
			width: 100%;
			padding: 30rpx 40rpx;
			box-sizing: border-box;
			margin-top: $uni-spacing-margin-sm;
			border-radius: $uni-border-radius-lg;
			box-shadow: $uni-bg-shadow;

			.left {
				width: 70%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				font-size: $uni-font-size-sm1;

				.user {
					display: flex;

					.name {
						color: #15c45b;
						font-weight: bold;
					}

					.pone {
						padding: 0rpx 40rpx;
						box-sizing: border-box;
					}

				}

				.address-title {
					margin-top: 10rpx
				}
			}

			.right {
				width: 30%;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.raio {
					width: 50rpx;
					height: 50rpx;
					border-radius: 100%;
					border: 4rpx solid $uni-border-color;
					display: flex;
					justify-content: center;
					align-items: center;

				}

				.acradio {
					border: 4rpx solid $uni-color-topic;
					background-color: $uni-color-topic;
				}
			}

		}

		.save-button {
			width: 90%;
			margin: 50rpx auto;
			background-color: $uni-color-topic;
			color: #fff;
			font-size: $uni-font-size-lg;
			padding: $uni-spacing-padding-sm 0rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: $uni-border-radius-lg;

		}
	}

	.ug-from {
		direction: rtl;

		/deep/ .uni-input-input {
			direction: rtl !important;
			text-align: right;
		}

		/deep/ .uni-input-placeholder {
			text-align: right;
		}
	}
</style>